<template>
  <div class="risk-chart">
    <!-- 环形图容器 -->
    <div ref="chart" style="width: 200px; height: 200px"></div>
    <div class="center-label">
      <span class="total-value">{{ total }}%</span>
      <div style="color: #1970f6">占比</div>
    </div>

    <!-- 图例和占比数据 -->
    <div class="legend">
      <div v-for="item in chartData" :key="item.name" class="legend-item">
        <span class="color-block" :style="{ background: item.color }"></span>
        <div class="flex">
          <div class="itm">
            <span class="label" style="margin-right: 10px">{{ item.name }}</span
            ><span class="value" :style="{ color: item.color }">{{ item.value }}人</span>
          </div>
          <div class="itm">
            <span class="label">占比</span><span class="value" :style="{ color: item.color }">{{ item.ratio }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      total: 0,
      chartData: [
        { name: '低风险', value: 6, ratio: 6, color: '#1970F6' },
        { name: '中风险', value: 6, ratio: 6, color: '#F8D100' },
        { name: '高风险', value: 6, ratio: 6, color: '#F59415' },
        { name: '极高风险', value: 6, ratio: 6, color: '#FF5E5E' },
      ],
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)

      // 计算总人数（用于百分比）
      this.total = this.chartData.reduce((sum, item) => sum + item.value, 0)

      // 配置项
      const option = {
        tooltip: {
          show: true,
          trigger: 'item',
        },

        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'], // 环形图内外半径
            avoidLabelOverlap: false,
            label: { show: false },
            // 中心圆形背景
            center: ['50%', '50%'],
            label: {
              // show: true,
              // position: 'inside',
              // formatter: '{d}%', // 显示百分比
            },
            data: this.chartData.map((item) => ({
              value: item.value,
              // name: item.name,
              itemStyle: { color: item.color },
              labelLine: { show: false },
            })),
          },
        ],
      }

      chart.setOption(option)
    },
  },
}
</script>

<style scoped>
.risk-chart {
  display: flex;
  flex-direction: row; /* 横向排列图表和图例 */
  align-items: center;
  position: relative;
}
.center-label {
  position: absolute;
  top: 30%;
  left: 13%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #1970f6;
  padding-top: 20px;

  text-align: center;
}

.total-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ff5e5e;
  margin-left: 5px;
}
.legend {
  .itm {
    margin-right: 8px;
  }
  .label {
    color: #abd5ff;
    margin-right: 8px;
  }
}
.legend-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.color-block {
  display: inline-block;
  width: 24px;
  height: 16px;
  margin-right: 8px;
  border-radius: 2px;
}
</style>
